<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="6">
				<el-input v-model="pageQuery.diseaseName" size="mini"></el-input>
			</el-col>
			
			<el-col :span="6">
				<el-button type="primary" plain size="mini" @click="search">查询</el-button>

			</el-col>
			<el-col :span="6">
				<el-button type="primary" plain size="mini" @click="handlerAdd">添加</el-button>
			</el-col>
		</el-row>





		<el-table size="mini" :data="tableData" style="width: 100%" max-height="750">
			<el-table-column prop="id" label="主键" width="180"> </el-table-column>
			<el-table-column prop="diseaseCode" label="疾病助记编码"> </el-table-column>
			<el-table-column prop="diseaseName" label="疾病名称"> </el-table-column>
			<el-table-column prop="diseaseIcd" label="国际ICD编码"> </el-table-column>
			<el-table-column prop="cateId" label="疾病分类的IDs"> </el-table-column>
			<el-table-column prop="createtime" label="创建时间"> </el-table-column>
			<el-table-column prop="valid" label="是否有效"> </el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- @size-change="handleSizeChange"
		 -->
		<el-pagination @current-change="queryData" :current-page.sync="pageQuery.current"
			:page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
			:total="total">
		</el-pagination>


		<el-dialog title="疾病编辑" :visible.sync="dialogVisible" width="500px">
			<edit @reload="queryData" :visible.sync="dialogVisible" v-if="dialogVisible" :id="id"></edit>
		</el-dialog>


	</div>
</template>

<script>
	import edit from './edit'

	export default {
		name: 'ToDoList',
		//注册局部组件
		components: {
			edit
		},
		data() {
			return {
				dialogVisible: false,
				id: undefined,
				tableData: [],
				total: 0,
				pageQuery: {
					current: 1,
					_type: "list",
					diseaseName: ''
				}
			}
		},
		methods: {
			handleEdit(index, row) {
				this.dialogVisible = true; //打开编辑框
				this.id = row.id
			},
			handleDelete(index, row) {

				this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {


					this.$http.get('/api/disease', (success) => {
						//重新查询结果
						this.queryData()
						//提示
						this.$message({
							type: 'success',
							message: '删除成功!'
						});

					}, {
						_type: 'delete',
						id: row.id
					})


				});

			},
			handlerAdd() {
				this.id = null;
				this.dialogVisible = true
			},
			search(){
				//每次点击查询从第一页开始查询
				this.pageQuery.current = 1;
				this.queryData();
			},
			// handleCurrentChange() {
			// 	//
			// 	this.queryData();
			// },
			queryData() {

				this.$http.get('/api/disease?_type=list', (page) => {
					this.tableData = page.data;
					this.total = page.total;
				}, this.pageQuery)


			}
		},
		computed: {

		},
		//在组件呗创建的时候加载数据 初始化
		created() {
			console.log("准备查询数据....")
			this.queryData()
		}
	}
</script>

<style>


</style>
